<ng-container *ngIf="type === 'C' || type === 'MIN' || type === 'H' || type === 'D'">
  <nz-date-picker
    [nzShowToday]="false"
    [nzShowTime]="showDateTime"
    [nzDisabledTime]="disabledDateTime"
    [nzFormat]="format"
    [nzDisabledDate]="disabledDate"
    [nzPlaceHolder]="prompt"
    [(ngModel)]="date"
    [nzAllowClear]="false"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    (nzOnOpenChange)="openCalendar()"
    (ngModelChange)="handleDateChange($event)"
  >
  </nz-date-picker>
</ng-container>

<ng-container *ngIf="type === 'W'">
  <nz-week-picker
    [nzShowToday]="false"
    [nzFormat]="format"
    [nzPlaceHolder]="prompt"
    [(ngModel)]="date"
    [nzAllowClear]="false"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    (nzOnOpenChange)="openCalendar()"
    (ngModelChange)="handleWeekChange()"
  >
  </nz-week-picker>
</ng-container>

<ng-container *ngIf="type === 'MON'">
  <nz-month-picker
    [nzFormat]="format"
    [nzDisabledDate]="disabledDate"
    [nzPlaceHolder]="prompt"
    [(ngModel)]="date"
    [nzAllowClear]="false"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    (nzOnOpenChange)="openCalendar()"
  >
  </nz-month-picker>
</ng-container>

<ng-container *ngIf="type === 'Q'">
  <nz-year-picker
    class="quarter"
    [nzFormat]="format"
    [nzDisabledDate]="disabledDate"
    [nzPlaceHolder]="prompt"
    [(ngModel)]="date"
    [nzAllowClear]="false"
    [nzOpen]="quarterOpen"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    [nzRenderExtraFooter]="quarter"
    (nzOnOpenChange)="openCalendar()"
    (click)="handleClickQuarter()"
  >
  </nz-year-picker>
  <ng-template #quarter>
    <ng-container>
      <div class="quarter-wrap">
        <ul>
          <li
            *ngFor="let quarter of quarterList; let i = index"
            [class.active]="quarterIndex === i"
            (click)="handleQuarterSelect(quarter, i)"
          >
            {{quarter}}
          </li>
        </ul>
      </div>
      <div class="confirm-wrap">
        <button class="confirm-btn" (click)="handleQuarterConfirm()">确定</button>
      </div>
    </ng-container>
  </ng-template>
</ng-container>

<ng-container *ngIf="type === 'Y'">
  <nz-year-picker
    [nzFormat]="format"
    [nzDisabledDate]="disabledDate"
    [nzPlaceHolder]="prompt"
    [(ngModel)]="date"
    [nzAllowClear]="false"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    (nzOnOpenChange)="openCalendar()"
  >
  </nz-year-picker>
</ng-container>

<ng-container *ngIf="type === 'R'">
  <nz-range-picker
    [nzFormat]="format"
    [(ngModel)]="date"
    [nzShowTime]="showDateTime"
    [nzClassName]="theme"
    [nzDropdownClassName]="theme"
    (nzOnOpenChange)="openCalendar()"
  ></nz-range-picker>
</ng-container>

